<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>店铺地址信息</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
  <style>
    html, body, #container {
      height: 100%;
      width: 100%;
    }

    .custom-input-card{
      width: 18rem;
    }

    .custom-input-card .btn:last-child{
      margin-left: 1rem;
    }

    .content-window-card{
      position: relative;
      width: 23rem;
      padding: 0.75rem 0 0 1.25rem;
      box-shadow: none;
      bottom: 0;
      left: 0;
    }

    .content-window-card p{
      height: 2rem;
    }
  </style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=7fed48e7e47264794b082c6cecb2a0ba"></script>
<script type="text/javascript">

  var shopInfo={}
  var paramsString=decodeURI(location.search)
  if (paramsString.length>10){
    paramsString=paramsString.substring(1)
    var paramsArr=paramsString.split('&')
    paramsArr.forEach(function (value,index){
      var valueArr = value.split('=')
      if (valueArr.length>1){
        shopInfo[valueArr[0]]=valueArr[1]
      }
    })
  }

  // console.log('shopInfo',shopInfo)

  var infoWindow;
  var map = new AMap.Map("container", {
    resizeEnable: true,
    center: shopInfo.location.split(','),
    zoom: 15
  });

  //在指定位置打开信息窗体
  function openInfo() {
    //构建信息窗体中显示的内容
    var info = [];
    // info.push("<div class='input-card content-window-card'><div><img style=\"float:left;width:67px;height:16px;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
    info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>"+shopInfo.name+"</h4>");
    // info.push("<p class='input-item'>电话 : 010-84107000   邮编 : 100102</p>");
    info.push("<p class='input-item'>地址 :"+shopInfo.address+"</p></div></div>");

    infoWindow = new AMap.InfoWindow({
      content: info.join("")  //使用默认信息窗体框样式，显示信息内容
    });

    infoWindow.open(map, map.getCenter());
  }

  openInfo()
</script>
</body>
</html>
